<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scale">
    <title>下拉菜单和滚动监听插件</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>

    </style>
</head>
<body>
<!--<div class="dropdown" id="dropdown">
    <button class="btn btn-primary" data-toggle="dropdown" id="btn">
        下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="">首页</a></li>
        <li><a href="">咨询</a></li>
        <li><a href="">产品</a></li>
        <li><a href="">关于</a></li>
    </ul>
</div>-->

<nav class="navbar navbar-default " id="nav2">
    <a href="" class="navbar-brand">Web开发</a>
    <ul class="nav navbar-nav">
        <li><a href="#html5">HTML5</a></li>
        <li><a href="#bootstrap">bootstrap</a></li>
        <li class="dropdown">
            <a href="" data-toggle="dropdown">javascript <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#jquery">jQuery</a></li>
                <li><a href="#yui">Yui</a></li>
                <li><a href="#extjs">ExtJS</a></li>
            </ul>
        </li>
    </ul>
</nav>

<div data-offset="0" data-spy="scroll" data-target="#nav2" style="padding: 0 10px;height: 200px;overflow: auto;position: relative;">
    <section class="sec">
        <h4 id="html5">html5 <a href="" onclick="removeSec(this)">删除</a></h4>
        <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
    </section>
    <section class="sec">
        <h4 id="bootstrap">bootstrap</h4>
        <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
    </section>
    <section class="sec">
        <h4 id="jquery">jquery</h4>
        <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
    </section>
    <section class="sec">
        <h4 id="yui">yui</h4>
        <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
    </section>
    <section class="sec">
        <h4 id="extjs">extjs</h4>
        <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
    </section>
</div>






<script>
    //$('#btn').dropdown();
    //$('#btn').dropdown('toggle');

    /*$('#dropdown').on('show.bs.dropdown',function(){
        alert('调用show方法时执行');
    });*/

    function removeSec(e){
        $(e).parents('.sec').remove();
        $('#content').scrollspy('refresh');
    }

</script>

</body>
</html>